{% extends 'base/base.html' %}
{% load static %}

{% block title %}
Add New Configuration
{% endblock title %}


{% block custom_js_css_link %}
{{ form.media }}
<style media="screen">
.ace_editor {
	width:100%;
	height:450px;
	font-size:12px;
	border:1px solid #CCC;
}
.django-ace-toolbar{
	display: none;
}
</style>
{% endblock custom_js_css_link %}

{% block breadcrumb_title %}
Add New Configuration
{% endblock breadcrumb_title %}

{% block main_content %}
    {% include 'scanEngine/configuration/_items/form_conf.html' with button_title="Save Configuration" widget_title="Add new configuration" form_action="add" %}
{% endblock main_content %}


{% block page_level_script %}
<script src="{% static 'assets/js/scrollspyNav.js' %}"></script>
<script type="text/javascript">
var input = document.getElementById("name");
var shortName = document.getElementById("short_name");

input.addEventListener("input", function() {
inputValue = document.getElementById("name").value;
    shortName.value = inputValue.replace(/[^a-zA-Z0-9]/g,'_').toLowerCase();;
});

shortName.addEventListener("input", function() {
inputValue = document.getElementById("short_name").value;
    shortName.value = inputValue.replace(/[^a-zA-Z0-9]/g,'_').toLowerCase();;
});


// custom file input
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
{% endblock page_level_script %}
